<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧医疗平台 - 患者端与医护端</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- 配置Tailwind CSS主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6', // 蓝色 - 医疗主题常用
                        secondary: '#10b981', // 绿色 - 健康、安心
                        tertiary: '#6366f1', // 紫色 - 专业、信任
                        danger: '#ef4444', // 红色 - 紧急、警告
                        light: '#f3f4f6', // 浅色背景
                        dark: '#1e293b', // 深色文字
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .hover-lift {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .hover-lift:hover {
                transform: translateY(-5px);
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="bg-light font-sans text-dark">
    <!-- 导航栏 -->
    <nav id="main-nav" class="fixed w-full z-50 transition-all duration-300 bg-white shadow-md">
        <div class="container mx-auto px-4 md:px-6 py-3">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <i class="fa fa-heartbeat text-primary text-2xl mr-2"></i>
                    <span class="text-xl font-bold text-primary">智慧医疗平台</span>
                </div>
                
                <!-- 桌面端导航菜单 -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#" class="nav-link active font-medium transition-all duration-300" data-page="home">首页</a>
                    <a href="#" class="nav-link font-medium transition-all duration-300" data-page="patient">患者端</a>
                    <a href="#" class="nav-link font-medium transition-all duration-300" data-page="doctor">医护端</a>
                    <a href="#" class="nav-link font-medium transition-all duration-300" data-page="contact">联系我们</a>
                </div>
                
                <!-- 移动端菜单按钮 -->
                <button id="menu-toggle" class="md:hidden text-dark hover:text-primary transition-colors">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
            
            <!-- 移动端导航菜单 -->
            <div id="mobile-menu" class="md:hidden hidden mt-4 pb-2">
                <a href="#" class="block py-2 nav-link active" data-page="home">首页</a>
                <a href="#" class="block py-2 nav-link" data-page="patient">患者端</a>
                <a href="#" class="block py-2 nav-link" data-page="doctor">医护端</a>
                <a href="#" class="block py-2 nav-link" data-page="contact">联系我们</a>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="pt-16">
        <!-- 首页/登录页面 -->
        <section id="home-page" class="min-h-screen flex flex-col justify-center py-12">
            <div class="container mx-auto px-4">
                <!-- 欢迎部分 -->
                <div class="text-center mb-16">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark mb-4">
                        智慧医疗，<span class="text-primary">连接医患</span>
                    </h1>
                    <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                        提供便捷高效的医疗服务平台，连接患者与医护人员，让医疗服务更加智能化、人性化
                    </p>
                </div>
                
                <!-- 平台选择卡片 -->
                <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
                    <!-- 患者端卡片 -->
                    <div class="bg-white rounded-xl overflow-hidden card-shadow hover-lift">
                        <div class="h-48 bg-primary/10 flex items-center justify-center">
                            <i class="fa fa-user-circle-o text-primary text-6xl"></i>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-3 text-dark">患者端</h3>
                            <p class="text-gray-600 mb-4">
                                便捷的在线预约、健康档案管理、在线问诊等服务，让您的医疗体验更加舒适
                            </p>
                            <ul class="mb-6 space-y-2">
                                <li class="flex items-center text-gray-600">
                                    <i class="fa fa-check-circle text-secondary mr-2"></i>
                                    在线预约挂号
                                </li>
                                <li class="flex items-center text-gray-600">
                                    <i class="fa fa-check-circle text-secondary mr-2"></i>
                                    查看个人健康档案
                                </li>
                                <li class="flex items-center text-gray-600">
                                    <i class="fa fa-check-circle text-secondary mr-2"></i>
                                    在线问诊咨询
                                </li>
                                <li class="flex items-center text-gray-600">
                                    <i class="fa fa-check-circle text-secondary mr-2"></i>
                                    查看检查报告
                                </li>
                            </ul>
                            <button class="platform-btn w-full py-3 bg-primary text-white rounded-lg font-medium transition-all hover:bg-primary/90" data-platform="patient">
                                进入患者端
                            </button>
                        </div>
                    </div>
                    
                    <!-- 医护端卡片 -->
                    <div class="bg-white rounded-xl overflow-hidden card-shadow hover-lift">
                        <div class="h-48 bg-tertiary/10 flex items-center justify-center">
                            <i class="fa fa-user-md text-tertiary text-6xl"></i>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-3 text-dark">医护端</h3>
                            <p class="text-gray-600 mb-4">
                                高效的患者管理、预约处理、电子病历、远程诊疗等功能，提升医疗服务效率
                            </p>
                            <ul class="mb-6 space-y-2">
                                <li class="flex items-center text-gray-600">
                                    <i class="fa fa-check-circle text-secondary mr-2"></i>
                                    患者信息管理
                                </li>
                                <li class="flex items-center text-gray-600">
                                    <i class="fa fa-check-circle text-secondary mr-2"></i>
                                    预约排班管理
                                </li>
                                <li class="flex items-center text-gray-600">
                                    <i class="fa fa-check-circle text-secondary mr-2"></i>
                                    电子病历记录
                                </li>
                                <li class="flex items-center text-gray-600">
                                    <i class="fa fa-check-circle text-secondary mr-2"></i>
                                    远程诊疗支持
                                </li>
                            </ul>
                            <button class="platform-btn w-full py-3 bg-tertiary text-white rounded-lg font-medium transition-all hover:bg-tertiary/90" data-platform="doctor">
                                进入医护端
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 患者端页面 -->
        <section id="patient-page" class="min-h-screen py-12 bg-white hidden">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-dark mb-4">患者服务中心</h2>
                    <p class="text-gray-600">便捷的医疗服务，触手可及</p>
                </div>
                
                <!-- 患者核心功能区 - 已简化 -->
                <div class="bg-white rounded-xl p-6 card-shadow text-center mb-12">
                    <p class="text-gray-600">患者功能已简化，当前保留健康数据分析功能</p>
                </div>
                
                <!-- 健康数据可视化区域 -->
                <div class="bg-white rounded-xl p-6 card-shadow mb-12">
                    <h3 class="text-xl font-bold mb-6 text-dark">健康数据分析</h3>
                    <div class="grid md:grid-cols-2 gap-6">
                        <!-- 健康指标趋势图 -->
                        <div>
                            <h4 class="text-lg font-medium mb-4 text-gray-800">近6个月健康指标趋势</h4>
                            <div class="w-full h-64">
                                <canvas id="healthTrendChart"></canvas>
                            </div>
                            <!-- 健康指标趋势表格 -->
                            <div class="mt-6 overflow-x-auto">
                                <table class="min-w-full bg-white border border-gray-200">
                                    <thead>
                                        <tr class="bg-gray-50">
                                            <th class="py-2 px-4 border-b text-left text-sm font-medium text-gray-600">月份</th>
                                            <th class="py-2 px-4 border-b text-left text-sm font-medium text-gray-600">血压(收缩压)</th>
                                            <th class="py-2 px-4 border-b text-left text-sm font-medium text-gray-600">血糖(mmol/L)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="hover:bg-gray-50">
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">1月</td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">120</td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">5.2</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50">
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">2月</td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">125</td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">5.4</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50">
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">3月</td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">122</td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">5.3</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50">
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">4月</td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">130</td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">5.5</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50">
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">5月</td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">128</td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">5.4</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50">
                                            <td class="py-2 px-4 text-sm text-gray-800">6月</td>
                                            <td class="py-2 px-4 text-sm text-gray-800">124</td>
                                            <td class="py-2 px-4 text-sm text-gray-800">5.3</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- 健康状态分布图 -->
                        <div>
                            <h4 class="text-lg font-medium mb-4 text-gray-800">健康状态分布</h4>
                            <div class="w-full h-64">
                                <canvas id="healthStatusChart"></canvas>
                            </div>
                            <!-- 健康状态分布表格 -->
                            <div class="mt-6 overflow-x-auto">
                                <table class="min-w-full bg-white border border-gray-200">
                                    <thead>
                                        <tr class="bg-gray-50">
                                            <th class="py-2 px-4 border-b text-left text-sm font-medium text-gray-600">健康状态</th>
                                            <th class="py-2 px-4 border-b text-left text-sm font-medium text-gray-600">比例</th>
                                            <th class="py-2 px-4 border-b text-left text-sm font-medium text-gray-600">说明</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="hover:bg-gray-50">
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">
                                                <span class="flex items-center">
                                                    <span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span>
                                                    正常
                                                </span>
                                            </td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">65%</td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">各项指标均在正常范围内</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50">
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">
                                                <span class="flex items-center">
                                                    <span class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></span>
                                                    轻度异常
                                                </span>
                                            </td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">20%</td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">部分指标略偏离正常范围</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50">
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">
                                                <span class="flex items-center">
                                                    <span class="w-3 h-3 bg-red-500 rounded-full mr-2"></span>
                                                    中度异常
                                                </span>
                                            </td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">10%</td>
                                            <td class="py-2 px-4 border-b text-sm text-gray-800">多项指标明显偏离，需要关注</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50">
                                            <td class="py-2 px-4 text-sm text-gray-800">
                                                <span class="flex items-center">
                                                    <span class="w-3 h-3 bg-purple-500 rounded-full mr-2"></span>
                                                    高度异常
                                                </span>
                                            </td>
                                            <td class="py-2 px-4 text-sm text-gray-800">5%</td>
                                            <td class="py-2 px-4 text-sm text-gray-800">指标严重异常，建议及时就医</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 患者信息区 -->
                <div class="grid md:grid-cols-3 gap-6 mb-12">
                    <!-- 个人信息 -->
                    <div class="md:col-span-1 bg-white rounded-xl p-6 card-shadow">
                        <h3 class="text-xl font-bold mb-4 text-dark">个人信息</h3>
                        <div class="flex flex-col items-center mb-4">
                            <div class="w-24 h-24 bg-gray-200 rounded-full overflow-hidden mb-4">
                                <i class="fa fa-user-o text-gray-400 text-4xl w-full h-full flex items-center justify-center"></i>
                            </div>
                            <h4 class="text-lg font-medium text-dark">张小明</h4>
                            <p class="text-gray-500">患者ID：PT2023001</p>
                        </div>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600">年龄：</span>
                                <span class="font-medium">35岁</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">性别：</span>
                                <span class="font-medium">男</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">联系电话：</span>
                                <span class="font-medium">138****6789</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">血型：</span>
                                <span class="font-medium">A型</span>
                            </div>
                        </div>
                        <button class="patient-feature-btn mt-6 w-full py-2 border border-primary text-primary rounded-lg font-medium transition-all hover:bg-primary/5" data-feature="edit-profile">
                            编辑信息
                        </button>
                    </div>
                    
                    <!-- 近期预约 -->
                    <div class="md:col-span-2 bg-white rounded-xl p-6 card-shadow">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-xl font-bold text-dark">近期预约</h3>
                            <button class="patient-feature-btn text-primary font-medium" data-feature="view-all-appointments">查看全部</button>
                        </div>
                        
                        <!-- 预约项目 -->
                        <div class="space-y-4">
                            <!-- 预约1 -->
                            <div class="border border-gray-200 rounded-lg p-4 bg-light/50">
                                <div class="flex justify-between items-start mb-3">
                                    <div>
                                        <h4 class="font-bold text-dark">心内科 - 李医生</h4>
                                        <p class="text-gray-600 text-sm">常规体检复查</p>
                                    </div>
                                    <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">待就诊</span>
                                </div>
                                <div class="flex flex-wrap gap-x-6 gap-y-2 text-sm text-gray-600">
                                    <div class="flex items-center">
                                        <i class="fa fa-calendar mr-2 text-primary"></i>
                                        2023-06-15
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fa fa-clock-o mr-2 text-primary"></i>
                                        09:30-10:00
                                    </div>
                                </div>
                                <div class="flex justify-end mt-3 space-x-2">
                                    <button class="patient-feature-btn px-3 py-1 text-sm border border-danger text-danger rounded hover:bg-danger/5" data-feature="cancel-appointment">
                                        <i class="fa fa-times mr-1"></i> 取消预约
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 医护端页面 -->
        <section id="doctor-page" class="min-h-screen py-12 bg-white hidden">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-dark mb-4">医护工作平台</h2>
                    <p class="text-gray-600">高效的医疗工作管理系统</p>
                </div>
                
                <!-- 医护功能区 -->
                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
                    <!-- 功能卡片1：患者管理 -->
                    <div class="bg-light rounded-xl p-6 card-shadow hover-lift">
                        <div class="bg-tertiary/10 w-14 h-14 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-users text-tertiary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2 text-dark">患者管理</h3>
                        <p class="text-gray-600 mb-2">查看和管理患者信息</p>
                        <p class="text-2xl font-bold text-tertiary">128</p>
                        <p class="text-xs text-gray-500">今日接诊</p>
                    </div>
                    
                    <!-- 功能卡片2：预约管理 -->
                    <div class="bg-light rounded-xl p-6 card-shadow hover-lift">
                        <div class="bg-primary/10 w-14 h-14 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-calendar-o text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2 text-dark">预约管理</h3>
                        <p class="text-gray-600 mb-2">查看和处理预约请求</p>
                        <p class="text-2xl font-bold text-primary">36</p>
                        <p class="text-xs text-gray-500">今日预约</p>
                    </div>
                    
                    <!-- 功能卡片3：电子病历 -->
                    <div class="bg-light rounded-xl p-6 card-shadow hover-lift">
                        <div class="bg-secondary/10 w-14 h-14 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-file-text text-secondary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2 text-dark">电子病历</h3>
                        <p class="text-gray-600 mb-2">查看和记录患者病历</p>
                        <p class="text-2xl font-bold text-secondary">89</p>
                        <p class="text-xs text-gray-500">待完善病历</p>
                    </div>
                    
                    <!-- 功能卡片4：远程诊疗 -->
                    <div class="bg-light rounded-xl p-6 card-shadow hover-lift">
                        <div class="bg-danger/10 w-14 h-14 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-video-camera text-danger text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2 text-dark">远程诊疗</h3>
                        <p class="text-gray-600 mb-2">在线视频问诊</p>
                        <p class="text-2xl font-bold text-danger">12</p>
                        <p class="text-xs text-gray-500">今日远程</p>
                    </div>
                </div>
                
                <!-- 医护数据可视化区域 -->
                <div class="grid md:grid-cols-2 gap-6 mb-12">
                    <!-- 患者就诊趋势图 -->
                    <div class="bg-white rounded-xl p-6 card-shadow">
                        <h3 class="text-xl font-bold mb-4 text-dark">患者就诊趋势</h3>
                        <div class="w-full h-80">
                            <canvas id="patientTrendChart"></canvas>
                        </div>
                    </div>
                    
                    <!-- 科室就诊分布 -->
                    <div class="bg-white rounded-xl p-6 card-shadow">
                        <h3 class="text-xl font-bold mb-4 text-dark">科室就诊分布</h3>
                        <div class="w-full h-80">
                            <canvas id="departmentChart"></canvas>
                        </div>
                    </div>
                </div>
                
                <!-- 工作区 -->
                <div class="grid md:grid-cols-3 gap-6">
                    <!-- 今日预约列表 -->
                    <div class="md:col-span-2 bg-white rounded-xl p-6 card-shadow">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-xl font-bold text-dark">今日预约</h3>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-sm border border-primary text-primary rounded hover:bg-primary/5">
                                    全部
                                </button>
                                <button class="px-3 py-1 text-sm bg-primary text-white rounded">
                                    待接诊
                                </button>
                                <button class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100">
                                    已完成
                                </button>
                            </div>
                        </div>
                        
                        <!-- 预约列表 -->
                        <div class="overflow-x-auto">
                            <table class="min-w-full">
                                <thead>
                                    <tr class="bg-light">
                                        <th class="py-3 px-4 text-left text-sm font-medium text-gray-600">患者姓名</th>
                                        <th class="py-3 px-4 text-left text-sm font-medium text-gray-600">年龄</th>
                                        <th class="py-3 px-4 text-left text-sm font-medium text-gray-600">预约时间</th>
                                        <th class="py-3 px-4 text-left text-sm font-medium text-gray-600">症状描述</th>
                                        <th class="py-3 px-4 text-left text-sm font-medium text-gray-600">操作</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    <!-- 预约项1 -->
                                    <tr class="hover:bg-light/50">
                                        <td class="py-3 px-4 text-sm font-medium text-dark">张小明</td>
                                        <td class="py-3 px-4 text-sm text-gray-600">35岁</td>
                                        <td class="py-3 px-4 text-sm text-gray-600">09:30-10:00</td>
                                        <td class="py-3 px-4 text-sm text-gray-600">常规体检复查</td>
                                        <td class="py-3 px-4 text-sm">
                                            <button class="text-primary mr-3 hover:underline">查看详情</button>
                                            <button class="text-secondary hover:underline">接诊</button>
                                        </td>
                                    </tr>
                                    <!-- 预约项2 -->
                                    <tr class="hover:bg-light/50">
                                        <td class="py-3 px-4 text-sm font-medium text-dark">李华</td>
                                        <td class="py-3 px-4 text-sm text-gray-600">42岁</td>
                                        <td class="py-3 px-4 text-sm text-gray-600">10:00-10:30</td>
                                        <td class="py-3 px-4 text-sm text-gray-600">高血压复查</td>
                                        <td class="py-3 px-4 text-sm">
                                            <button class="text-primary mr-3 hover:underline">查看详情</button>
                                            <button class="text-secondary hover:underline">接诊</button>
                                        </td>
                                    </tr>
                                    <!-- 预约项3 -->
                                    <tr class="hover:bg-light/50">
                                        <td class="py-3 px-4 text-sm font-medium text-dark">王丽</td>
                                        <td class="py-3 px-4 text-sm text-gray-600">28岁</td>
                                        <td class="py-3 px-4 text-sm text-gray-600">10:30-11:00</td>
                                        <td class="py-3 px-4 text-sm text-gray-600">孕期检查</td>
                                        <td class="py-3 px-4 text-sm">
                                            <button class="text-primary mr-3 hover:underline">查看详情</button>
                                            <button class="text-secondary hover:underline">接诊</button>
                                        </td>
                                    </tr>
                                    <!-- 预约项4 -->
                                    <tr class="hover:bg-light/50">
                                        <td class="py-3 px-4 text-sm font-medium text-dark">赵建国</td>
                                        <td class="py-3 px-4 text-sm text-gray-600">56岁</td>
                                        <td class="py-3 px-4 text-sm text-gray-600">14:00-14:30</td>
                                        <td class="py-3 px-4 text-sm text-gray-600">心脏不适</td>
                                        <td class="py-3 px-4 text-sm">
                                            <button class="text-primary mr-3 hover:underline">查看详情</button>
                                            <button class="text-secondary hover:underline">接诊</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="flex justify-center mt-6">
                            <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-600 hover-bg-gray-100">
                                加载更多
                            </button>
                        </div>
                    </div>
                    
                    <!-- 医生信息和快速操作 -->
                    <div class="bg-white rounded-xl p-6 card-shadow">
                        <h3 class="text-xl font-bold mb-6 text-dark">医生信息</h3>
                        
                        <!-- 医生头像和基本信息 -->
                        <div class="flex flex-col items-center mb-6">
                            <div class="w-24 h-24 bg-gray-200 rounded-full overflow-hidden mb-4">
                                <i class="fa fa-user-md text-gray-400 text-4xl w-full h-full flex items-center justify-center"></i>
                            </div>
                            <h4 class="text-lg font-medium text-dark">李医生</h4>
                            <p class="text-primary">心内科 · 主任医师</p>
                        </div>
                        
                        <!-- 今日工作统计 -->
                        <div class="bg-light rounded-lg p-4 mb-6">
                            <h5 class="font-medium text-dark mb-3">今日工作统计</h5>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600 text-sm">已接诊</span>
                                    <span class="font-bold text-primary">8/12</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 66%"></div>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600 text-sm">待完善病历</span>
                                    <span class="font-bold text-danger">3</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600 text-sm">远程会诊</span>
                                    <span class="font-bold text-tertiary">2</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 快速操作 -->
                        <h5 class="font-medium text-dark mb-3">快速操作</h5>
                        <div class="space-y-2">
                            <button class="w-full flex items-center justify-between p-3 bg-light rounded-lg hover:bg-gray-100">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center mr-3">
                                        <i class="fa fa-calendar text-primary"></i>
                                    </div>
                                    <span>排班设置</span>
                                </div>
                                <i class="fa fa-angle-right text-gray-400"></i>
                            </button>
                            <button class="w-full flex items-center justify-between p-3 bg-light rounded-lg hover:bg-gray-100">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-secondary/10 rounded-full flex items-center justify-center mr-3">
                                        <i class="fa fa-file-text-o text-secondary"></i>
                                    </div>
                                    <span>病历模板</span>
                                </div>
                                <i class="fa fa-angle-right text-gray-400"></i>
                            </button>
                            <button class="w-full flex items-center justify-between p-3 bg-light rounded-lg hover:bg-gray-100">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-tertiary/10 rounded-full flex items-center justify-center mr-3">
                                        <i class="fa fa-bell text-tertiary"></i>
                                    </div>
                                    <span>通知设置</span>
                                </div>
                                <i class="fa fa-angle-right text-gray-400"></i>
                            </button>
                            <button class="w-full flex items-center justify-between p-3 bg-light rounded-lg hover:bg-gray-100">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-danger/10 rounded-full flex items-center justify-center mr-3">
                                        <i class="fa fa-cog text-danger"></i>
                                    </div>
                                    <span>系统设置</span>
                                </div>
                                <i class="fa fa-angle-right text-gray-400"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 联系我们页面 -->
        <section id="contact-page" class="min-h-screen py-12 bg-white hidden">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-dark mb-4">联系我们</h2>
                    <p class="text-gray-600">如有任何问题或建议，请随时与我们联系</p>
                </div>
                
                <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
                    <!-- 联系信息 -->
                    <div class="bg-light rounded-xl p-8 card-shadow">
                        <h3 class="text-xl font-bold mb-6 text-dark">联系方式</h3>
                        
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4 shrink-0">
                                    <i class="fa fa-map-marker text-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-dark mb-1">地址</h4>
                                    <p class="text-gray-600">北京市海淀区中关村南大街5号医疗科技大厦</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4 shrink-0">
                                    <i class="fa fa-phone text-primary mr-3"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-dark mb-1">电话</h4>
                                    <p class="text-gray-600">400-123-4567</p>
                                    <p class="text-gray-600">工作日 9:00-18:00</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4 shrink-0">
                                    <i class="fa fa-envelope-o text-primary mr-3"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-dark mb-1">邮箱</h4>
                                    <p class="text-gray-600">support@smartmedical.com</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4 shrink-0">
                                    <i class="fa fa-weixin text-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-dark mb-1">微信公众号</h4>
                                    <p class="text-gray-600">智慧医疗平台</p>
                                    <div class="w-32 h-32 bg-white mt-2 flex items-center justify-center border border-gray-200">
                                        <span class="text-gray-400 text-sm">微信二维码</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 留言表单 -->
                    <div class="bg-white rounded-xl p-8 card-shadow">
                        <h3 class="text-xl font-bold mb-6 text-dark">留言反馈</h3>
                        
                        <form>
                            <div class="space-y-4">
                                <div class="grid md:grid-cols-2 gap-4">
                                    <div>
                                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                        <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="请输入您的姓名">
                                    </div>
                                    <div>
                                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">电话</label>
                                        <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="请输入您的电话">
                                    </div>
                                </div>
                                
                                <div>
                                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                                    <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="请输入您的邮箱">
                                </div>
                                
                                <div>
                                    <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">主题</label>
                                    <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                                        <option value="">请选择留言主题</option>
                                        <option value="suggestion">建议反馈</option>
                                        <option value="complaint">投诉问题</option>
                                        <option value="consultation">咨询问题</option>
                                        <option value="other">其他问题</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label for="message" class="block text-sm font-medium text-gray-700 mb-1">留言内容</label>
                                    <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="请输入您的留言内容"></textarea>
                                </div>
                                
                                <button type="submit" class="w-full py-3 bg-primary text-white rounded-lg font-medium transition-all hover:bg-primary/90">
                                    提交留言
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid md:grid-cols-4 gap-8">
                <!-- 关于我们 -->
                <div>
                    <div class="flex items-center mb-4">
                        <i class="fa fa-heartbeat text-primary text-2xl mr-2"></i>
                        <span class="text-xl font-bold">智慧医疗平台</span>
                    </div>
                    <p class="text-gray-400 mb-4">
                        我们致力于为患者和医护人员提供高效、便捷的医疗服务平台，让医疗服务更加智能化、人性化。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 快速链接 -->
                <div>
                    <h4 class="text-lg font-bold mb-4">快速链接</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">首页</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">患者端</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">医护端</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">健康资讯</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">联系我们</a></li>
                    </ul>
                </div>
                
                <!-- 服务支持 -->
                <div>
                    <h4 class="text-lg font-bold mb-4">服务支持</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">帮助中心</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">用户协议</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">意见反馈</a></li>
                    </ul>
                </div>
                
                <!-- 联系信息 -->
                <div>
                    <h4 class="text-lg font-bold mb-4">联系我们</h4>
                    <ul class="space-y-3">
                        <li class="flex items-center text-gray-400">
                            <i class="fa fa-map-marker text-primary mr-3"></i>
                            北京市海淀区中关村南大街5号
                        </li>
                        <li class="flex items-center text-gray-400">
                            <i class="fa fa-phone text-primary mr-3"></i>
                            400-123-4567
                        </li>
                        <li class="flex items-center text-gray-400">
                            <i class="fa fa-envelope-o text-primary mr-3"></i>
                            support@smartmedical.com
                        </li>
                        <li class="flex items-center text-gray-400">
                            <i class="fa fa-clock-o text-primary mr-3"></i>
                            工作日 9:00-18:00
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-500 text-sm">
                <p>&copy; 2023 智慧医疗平台. 保留所有权利.</p>
            </div>
        </div>
    </footer>
    
    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const nav = document.getElementById('main-nav');
            if (window.scrollY > 10) {
                nav.classList.add('py-2');
                nav.classList.remove('py-3');
                nav.classList.add('bg-white/95');
                nav.classList.add('backdrop-blur-sm');
            } else {
                nav.classList.remove('py-2');
                nav.classList.add('py-3');
                nav.classList.remove('bg-white/95');
                nav.classList.remove('backdrop-blur-sm');
            }
        });
        
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 页面切换功能
        const navLinks = document.querySelectorAll('.nav-link');
        const platformBtns = document.querySelectorAll('.platform-btn');
        const pages = {
            'home': document.getElementById('home-page'),
            'patient': document.getElementById('patient-page'),
            'doctor': document.getElementById('doctor-page'),
            'contact': document.getElementById('contact-page')
        };
        
        // 显示指定页面，隐藏其他页面
        function showPage(pageId) {
            // 隐藏所有页面
            for (const id in pages) {
                pages[id].classList.add('hidden');
            }
            
            // 显示指定页面
            if (pages[pageId]) {
                pages[pageId].classList.remove('hidden');
            }
            
            // 更新活动链接
            navLinks.forEach(link => {
                link.classList.remove('active');
                link.classList.remove('text-primary');
                if (link.dataset.page === pageId) {
                    link.classList.add('active');
                    link.classList.add('text-primary');
                }
            });
            
            // 关闭移动端菜单
            document.getElementById('mobile-menu').classList.add('hidden');
            
            // 滚动到页面顶部
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
        
        // 导航链接点击事件
        navLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                showPage(this.dataset.page);
            });
        });
        
        // 平台按钮点击事件
        platformBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                showPage(this.dataset.platform);
            });
        });
        
        // 初始化导航链接样式
        navLinks.forEach(link => {
            if (link.classList.contains('active')) {
                link.classList.add('text-primary');
            }
        });
        
        // 表单提交处理
        const contactForm = document.querySelector('form');
        if (contactForm) {
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();
                // 这里可以添加表单验证和提交逻辑
                alert('感谢您的留言，我们会尽快回复您！');
                this.reset();
            });
        }
        
        // 患者功能按钮点击处理（已简化）
        const patientFeatureBtns = document.querySelectorAll('.patient-feature-btn');
        const featureMessages = {
            'edit-profile': '正在打开个人信息编辑页面...',
            'view-all-appointments': '正在加载所有预约记录...',
            'cancel-appointment': '确定要取消该预约吗？'
        };
        
        patientFeatureBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const feature = this.dataset.feature;
                if (feature === 'cancel-appointment') {
                    if (confirm('确定要取消该预约吗？取消后可能影响您的预约信用记录。')) {
                        alert('预约已成功取消！');
                    }
                } else if (featureMessages[feature]) {
                    alert(featureMessages[feature]);
                    // 模拟功能跳转延迟
                    setTimeout(() => {
                        console.log(`执行功能: ${feature}`);
                    }, 500);
                }
            });
        });
        
        // 初始化健康数据可视化图表
        function initHealthCharts() {
            // 健康指标趋势图
            const trendCtx = document.getElementById('healthTrendChart').getContext('2d');
            const healthTrendChart = new Chart(trendCtx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    datasets: [{
                        label: '血压(收缩压)',
                        data: [120, 125, 122, 130, 128, 124],
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        tension: 0.4,
                        fill: true
                    }, {
                        label: '血糖(mmol/L)',
                        data: [5.2, 5.4, 5.3, 5.5, 5.4, 5.3],
                        borderColor: '#10b981',
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false,
                            ticks: {
                                callback: function(value) {
                                    return value;
                                }
                            }
                        }
                    }
                }
            });
            
            // 健康状态分布图
            const statusCtx = document.getElementById('healthStatusChart').getContext('2d');
            const healthStatusChart = new Chart(statusCtx, {
                type: 'doughnut',
                data: {
                    labels: ['正常', '轻度异常', '中度异常', '高度异常'],
                    datasets: [{
                        data: [65, 20, 10, 5],
                        backgroundColor: [
                            '#10b981',  // 绿色 - 正常
                            '#f59e0b',  // 黄色 - 轻度异常
                            '#ef4444',  // 红色 - 中度异常
                            '#6b21a8'   // 紫色 - 高度异常
                        ],
                        borderWidth: 2,
                        borderColor: '#ffffff'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    return `${label}: ${value}%`;
                                }
                            }
                        }
                    },
                    cutout: '60%'
                }
            });
        }
        
        // 初始化医护端数据可视化图表
        function initDoctorCharts() {
            // 患者就诊趋势图
            const trendCtx = document.getElementById('patientTrendChart').getContext('2d');
            const patientTrendChart = new Chart(trendCtx, {
                type: 'bar',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [{
                        label: '门诊患者',
                        data: [120, 140, 135, 160, 155, 90, 60],
                        backgroundColor: '#3b82f6',
                        borderRadius: 4
                    }, {
                        label: '远程诊疗',
                        data: [45, 60, 55, 70, 65, 30, 25],
                        backgroundColor: '#f59e0b',
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    }
                }
            });
            
            // 科室就诊分布图
            const deptCtx = document.getElementById('departmentChart').getContext('2d');
            const departmentChart = new Chart(deptCtx, {
                type: 'pie',
                data: {
                    labels: ['内科', '外科', '儿科', '妇产科', '眼科', '其他'],
                    datasets: [{
                        data: [35, 25, 15, 10, 8, 7],
                        backgroundColor: [
                            '#3b82f6',  // 蓝色 - 内科
                            '#10b981',  // 绿色 - 外科
                            '#f59e0b',  // 黄色 - 儿科
                            '#ef4444',  // 红色 - 妇产科
                            '#8b5cf6',  // 紫色 - 眼科
                            '#6b7280'   // 灰色 - 其他
                        ],
                        borderWidth: 2,
                        borderColor: '#ffffff'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    // 计算百分比
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = Math.round((value / total) * 100);
                                    return `${label}: ${value}人 (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });
        }
        
        // 页面加载完成后初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 初始页面如果是患者端，直接初始化患者端图表
            if (!document.getElementById('patient-page').classList.contains('hidden')) {
                initHealthCharts();
            }
            // 初始页面如果是医护端，直接初始化医护端图表
            else if (!document.getElementById('doctor-page').classList.contains('hidden')) {
                initDoctorCharts();
            }
            
            // 监听页面切换事件，在切换页面时初始化相应图表
            const navLinks = document.querySelectorAll('.nav-link');
            navLinks.forEach(link => {
                link.addEventListener('click', function() {
                    // 清除现有的图表实例，避免重复创建
                    Chart.helpers.each(Chart.instances, function(instance) {
                        instance.destroy();
                    });
                    
                    // 根据切换的页面初始化相应的图表
                    if (this.dataset.page === 'patient') {
                        setTimeout(initHealthCharts, 100); // 延迟执行确保DOM已更新
                    } else if (this.dataset.page === 'doctor') {
                        setTimeout(initDoctorCharts, 100); // 延迟执行确保DOM已更新
                    }
                });
            });
        });
        
        // 添加平滑滚动效果
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                if (this.getAttribute('href') === '#') {
                    e.preventDefault();
                }
            });
        });
    </script>
</body>
</html>